<template>
  <div>
    <span
      v-if="orgInfo.esignFlag === 0"
      class="error"
      style="display: inline-block; vertical-align: top; margin-left: 5px"
    >
      <InfoCircleOutlined style="width: 20px; margin-top: 1px" />
      <span style="vertical-align: top">本组织未开启电子签署，暂不支持使用此功能，请联系组织管理员</span>
    </span>
    <a-form ref="formTem" :model="formModal">
      <Draggable :list="formModal.fileListItemList" item-key="index" handle=".move">
        <template #item="{ element, index }">
          <div class="card_box">
            <a-card :bordered="false" class="ant-card" :body-style="{ padding: '12px' }">
              <div class="btn-box">
                <Icon class="cursor-pointer button_span" size="25" @click="delDoc(index)"><delete-outlined /> </Icon>
                <Icon class="cursor-pointer move button_span" size="30"><drag-outlined /> </Icon>
              </div>
              <i class="number">{{ index + 1 }}</i>

              <a-row :gutter="20">
                <a-col :span="12">
                  <a-form-item
                    label="文件名称"
                    :name="['fileListItemList', index, 'fileName']"
                    :rules="[{ required: true, message: '请输入文件名称!' }]"
                  >
                    <a-input v-model:value="element.fileName" :maxlength="64" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="文件描述" :name="['fileListItemList', index, 'fileDesc']">
                    <a-input v-model:value="element.fileDesc" :maxlength="64" allow-clear></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="20">
                <a-col :span="6">
                  <a-form-item
                    label="是否必传文件"
                    :rules="[{ required: true, message: '是否必传文件!' }]"
                    :name="['fileListItemList', index, 'newRequireFile']"
                  >
                    <a-switch v-model:checked="element.newRequireFile"> </a-switch>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item
                    label="是否必填版本信息"
                    :rules="[{ required: true, message: '是否必填版本信息!' }]"
                    :name="['fileListItemList', index, 'newRequireVersion']"
                  >
                    <a-switch v-model:checked="element.newRequireVersion"> </a-switch>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item
                    label="文件数量"
                    :rules="[{ required: true, message: '请选择文件数量!' }]"
                    :name="['fileListItemList', index, 'fileAmount']"
                  >
                    <a-input-number
                      id="inputNumber"
                      v-model:value="element.fileAmount"
                      :min="0"
                      :max="100"
                      :formatter="limitNumber"
                      :parser="limitNumber"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item
                    label="文件格式"
                    :rules="[{ required: true, message: '请选择文件格式!' }]"
                    :name="['fileListItemList', index, 'fileFormat']"
                  >
                    <a-select v-model:value="element.fileFormat" mode="multiple">
                      <a-select-option
                        v-for="item in typeLimitList"
                        :disabled="item === 'txt' && element.signFlag"
                        :value="item"
                        >{{ item }}</a-select-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col v-if="!hideSignSetting" :span="6">
                  <a-form-item label="是否需要电子签署" :name="['fileListItemList', index, 'signFlag']">
                    <a-switch
                      v-model:checked="element.signFlag"
                      :disabled="element.fileFormat.includes('txt')"
                      :checked-value="1"
                      :un-checked-value="0"
                    ></a-switch>
                  </a-form-item>
                </a-col>
                <a-col v-if="element.signFlag" :span="10">
                  <a-form-item
                    label="电子签署方式"
                    :rules="[{ required: !!element.signFlag, message: '请选择文件格式!' }]"
                    :name="['fileListItemList', index, 'signWay']"
                  >
                    <a-checkbox-group v-model:value="element.signWay">
                      <a-checkbox value="1">个人签名</a-checkbox>
                      <a-checkbox value="2">组织签章</a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="模板文件">
                    <MyUploadFile v-model:fileList="element.templateFileList" :show-file-list="true" />
                    <!-- <a-button type="primary" ghost>从SOP文件选择</a-button> -->
                    <!-- <a-button type="primary" ghost style="margin-left: 10px">从本地上传</a-button>
                    <div v-for="(item, index) in element.templateFileList" class="m-1">
                      {{ item.tempFileName
                      }}<span
                        class="ml-5 text-red-500 cursor-pointer"
                        @click="delTemplateFile(element.templateFileList, index)"
                        >X</span
                      >
                    </div> -->
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-if="!hideSignSetting">
                <a-col :span="6">
                  <div
                    v-if="element.fileFormat.includes('txt')"
                    class="error"
                    style="display: inline-block; vertical-align: top; margin-top: 7px"
                  >
                    <InfoCircleOutlined style="width: 20px; margin: 1px 5px 0 0" />
                    <span style="vertical-align: top">txt文件不可开启电子签署</span>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </div>
        </template>
      </Draggable>
    </a-form>
    <a-button type="dashed" block @click="addDoc">
      <Icon class="cursor-pointer" size="20"><plus-outlined /> </Icon>
    </a-button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { DeleteOutlined, DragOutlined, PlusOutlined } from '@vicons/antd'
import { message } from 'ant-design-vue'
import Draggable from 'vuedraggable'
import { InfoCircleOutlined } from '@vicons/antd'
import { storage } from '@/utils/Storage'

const emits = defineEmits(['getTableData'])
const { form, hideSignSetting } = defineProps(['form', 'hideSignSetting'])

const orgInfo = storage.get('ORGINFO')
const formModal = ref(form)
const formTem = ref()
const typeLimitList = reactive(['pdf', 'doc/docx', 'ppt/pptx', 'xls/xlsx', 'txt', 'jpg/png'])

const addDoc = () => {
  const obj = {
    templateFileList: [],
    newRequireFile: false,
    fileName: '',
    newRequireVersion: false,
    fileFormat: [],
    fileDesc: '',
    fileAmount: 0
  }
  if (!formModal.value.fileListItemList || !formModal.value.fileListItemList.length) {
    formModal.value.fileListItemList[0] = obj
  } else {
    formModal.value.fileListItemList.push(obj)
  }
}
/* 限制数字输入框只能输入整数 */
const limitNumber = (value) => {
  if (typeof value === 'string') {
    return !isNaN(Number(value)) ? value.replace(/[^0-9]/g, '') : ''
  } else if (typeof value === 'number') {
    return !isNaN(value) ? String(value).replace(/[^0-9]/g, '') : ''
  }
  return ''
}

//删除文档
const delDoc = (index: number) => {
  formModal.value.fileListItemList.splice(index, 1)
}

//删除模板文件
// const delTemplateFile = (templateFileList, index) => {
//   templateFileList.splice(index, 1)
// }

const onFinsh = async () => {
  if (!formModal.value.fileListItemList || !formModal.value.fileListItemList.length) {
    return message.warning('请添加文件信息！')
  }
  const valid = await formTem.value.validate()
  if (valid) {
    if (formModal.value.fileListItemList.length) {
      formModal.value.fileListItemList.forEach((element, index) => {
        element.displayOrder = index + 1
        if (element.newRequireFile) {
          element.requireFile = 1
        } else {
          element.requireFile = 0
        }
        if (element.newRequireVersion) {
          element.requireVersion = 1
        } else {
          element.requireVersion = 0
        }
        if (element.newComplementFile) {
          element.complementFile = 1
        } else {
          element.complementFile = 0
        }
        if (!element.signFlag) {
          element.signWay = []
        }
        if (element.templateFileList && element.templateFileList.length) {
          element.templateFileList.forEach((item) => {
            item.tempFileId = item.uid
            item.tempFileName = item.name
          })
          element.templateFile = JSON.stringify(element.templateFileList)
        } else {
          element.templateFile = ''
        }
      })
    }
    emits('getTableData')
  }
}

defineExpose({ onFinsh })
</script>
<style lang="less" scoped>
.card_box {
  margin-bottom: 16px;
}
.ant-card {
  border-radius: 8px;
  box-shadow: 1px 4px 2px 0px rgb(0 0 0 / 6%);
  padding: 0 40px;
  .number {
    width: 18px;
    height: 18px;
    text-align: center;
    color: #999;
    text-align: center;
    line-height: 18px;
    position: absolute;
    left: 12px;
    top: 20px;
    bottom: 0;
    border-radius: 30px;
    border: 1px solid #999;
  }
}
.btn-box {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  height: 60px;
  margin: auto;
  .button_span {
    display: block;
    color: red;
    &.move {
      margin-top: 10px;
      color: #999;
    }
  }
}
</style>
